import { useRef } from 'react';
import { Button, ScrollView, Text, View, StyleSheet } from 'react-native';

// 1. 定义主组件和知识点列表
export default function App() {
  const scrollRef = useRef<ScrollView>(null);

  // 1.1 知识点数组
  const knowledgeList = [
    "知识点1：React Native 是一个用于开发跨平台移动应用的框架。",
    "知识点2：JavaScript 是一种动态类型、基于原型的脚本语言。",
    "知识点3：HTML 用于构建网页的结构。",
    "知识点4：CSS 用于设置网页的样式和布局。",
    "知识点5：Git 是一个分布式版本控制系统，常用于代码管理。",
    "知识点6：API（应用程序编程接口）用于不同软件之间的通信。",
    "知识点7：HTTP 状态码 200 表示请求成功。",
    "知识点8：Node.js 允许开发者用 JavaScript 编写服务器端代码。",
    "知识点9：TypeScript 是 JavaScript 的超集，增加了类型系统。",
    "知识点10：JSON 是一种轻量级的数据交换格式。",
    "知识点11：SQL 用于操作和查询关系型数据库。",
    "知识点12：OAuth 是一种开放授权协议，常用于第三方登录。",
    "知识点13：RESTful API 遵循无状态、统一接口等原则。",
    "知识点14：Linux 是一个开源的类 Unix 操作系统。",
    "知识点15：DOM（文档对象模型）用于表示和操作 HTML 文档结构。",
    "知识点16：前端三大主流框架有 React、Vue 和 Angular。",
    "知识点17：Redux 是一个流行的 JavaScript 状态管理库。",
    "知识点18：Promise 用于处理异步操作。",
    "知识点19：正则表达式用于字符串的模式匹配和处理。",
    "知识点20：虚拟 DOM 能提升前端渲染性能。",
    "知识点21：跨域是指浏览器阻止不同源之间的资源请求。",
    "知识点22：Webpack 是一个流行的前端资源打包工具。",
    "知识点23：MVVM 是一种常见的软件架构模式。",
    "知识点24：响应式设计可以让网页适配不同设备。",
    "知识点25：Cookie 和 LocalStorage 都可以用于本地存储数据。",
    "知识点26：JWT（JSON Web Token）常用于前后端分离的身份认证。",
    "知识点27：Sass 和 Less 是 CSS 预处理器。",
    "知识点28：Babel 可以将 ES6+ 代码转译为兼容旧浏览器的 JavaScript。",
    "知识点29：Hooks 是 React 16.8 引入的函数组件状态管理方案。",
    "知识点30：CI/CD 可以自动化软件的构建、测试和部署流程。"
  ];

  // 2. 渲染界面
  return (
    <ScrollView ref={scrollRef} style={{ backgroundColor: '#f2f4f8' }}>
      {/* 2.1 滚动到底部按钮 */}
      <Button
        title="滚动到底部"
        onPress={() => scrollRef.current?.scrollToEnd()}
      />
      {/* 2.2 渲染知识点卡片，每个卡片随机颜色 */}
      {knowledgeList.map((item, i) => {
        // 2.2.1 随机生成一个柔和的背景色
        const randomColor = `hsl(${Math.floor(Math.random() * 360)}, 70%, 90%)`;
        return (
          <View key={i} style={[styles.card, { backgroundColor: randomColor }]}>
            <Text style={styles.cardText}>{item}</Text>
          </View>
        );
      })}
      {/* 2.3 滚动到顶部按钮 */}
      <Button
        title="滚动到顶部"
        onPress={() => scrollRef.current?.scrollTo({ y: 0, animated: true })}
      />
    </ScrollView>
  );
}

// 3. 样式定义
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 10,
    marginHorizontal: 16,
    marginVertical: 8,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 4,
    elevation: 2,
  },
  cardText: {
    fontSize: 18,
    color: '#333',
    lineHeight: 26,
  },
});





